<template>
    <v-chart class="chart" :option="option" />
</template>

<script setup>
import { ref } from 'vue'
import VChart from 'vue-echarts'
import * as echarts from 'echarts/core'
// 引入柱状图和折线图图表类型
import {
    LineChart
    // 其他需要的图表类型可以在这里引入
} from 'echarts/charts'

//引入提示数字，标题，工具箱组件
import { TitleComponent, TooltipComponent, LegendComponent, ToolboxComponent, GridComponent } from 'echarts/components'

// 标签自动布局、全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features'

// 引入 Canvas 渲染器
import { CanvasRenderer } from 'echarts/renderers'

import _ from 'lodash'
// api接口
import { getReportDataApi } from '../../../api/report.js'

// 设置配置选项
const option = ref({})
// 获取接口数据
async function getReportData() {
    const data = await getReportDataApi()
    option.value = _.merge(customOption, data)
}
getReportData()

//注册必要的组件
echarts.use([TitleComponent, TooltipComponent, LegendComponent, ToolboxComponent, GridComponent, LineChart, CanvasRenderer, LabelLayout, UniversalTransition])

const customOption = {
    title: {
        text: '用户来源'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#E9EEF3'
            }
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    legend: {},
    xAxis: [
        {
            boundaryGap: false
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: []
}

</script>

<style scoped>
.chart {
    width: 700px;
    height: 450px;
}
</style>
